iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 7
0
Modern Web

少年學Vue,如隙中窺月系列 第 7

[Day7] 表單資料綁定

  • 分享至 

  • xImage
  •  

今天我們來學習 Vue 如何綁定表單的資料欄位

輸入欄位資料綁定

我們透過 v-model 將變數 text 資料與 input 單行輸入值綁在一起,也透過 v-model 將變數 textarea 資料與 textarea 多行資料輸入值綁在一起。此時,當我們在 input 單行欄位或 textarea 多行欄位輸入時,此時綁定的資料 textarea 還有 text 就會跟著變動。

https://i.imgur.com/CTfJZ1m.png

<body>
    <div class="app">
        input:<input type="text" v-model="text"> {{text}}
        <br>
        textarea:<textarea cols="30" rows="3" v-model="textarea"></textarea>
        {{textarea}}
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el:'.app',
        data:{
            text:"",
            textarea:""
        }
    });
</script>

Checkbox (多選)

我們用 v-modelcheckbox 資料和 checkbox 多選欄位綁定在一起,當我們點擊 checkbox 欄位時,會發現資料 checkbox 值更改為 true,再點擊一次,checkbox 值更改為 false。如果我們使用 v-modelcheckbox 點擊欄位和陣列資料 checkboxarray 綁在一起,並且設定各項點擊欄位的value,會發現當我們點擊各項 checkbox 點擊欄位時,他的 value 會被加進 checkboxarray 陣列內,再次點擊,反之就從陣列中刪除。

https://i.imgur.com/IZVhlCd.png

<body>
    <div class="app">
        <input type="checkbox" v-model="checkbox">吃晚餐<br>
        喜歡吃什麼肉??
        <input type="checkbox" v-model="checkboxarray" value="chicken">雞肉
        <input type="checkbox" v-model="checkboxarray" value="beef">牛肉
        <input type="checkbox" v-model="checkboxarray" value="pork">豬肉
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el:'.app',
        data:{
            checkbox:'',
            checkboxarray:[]
        }
    });
</script>

Radio (單選)

RadioCheckbox 最大的差異在於一個是單選,一個是多選,如果我們用 v-model 將資料 radio 還和 radio 點擊欄位綁在一起,此時可以發現,當我點擊 radio 點擊欄位時,radio 資料會變成 radio 點擊欄位設定的 value 值,當我們點擊不同 radio 的點擊欄位時,radio 資料會變成我們的點擊欄位的 value ,就算我們把 radio 資料以陣列方式呈現,點擊後還是會以單一資料呈現,不像 checkbox 可以有多筆值。

https://i.imgur.com/UKUE9SR.png

<body>
    <div class="app">
        喜歡吃什麼肉??
        <input type="radio" v-model="radio" value="chicken">雞肉
        <input type="radio" v-model="radio" value="beef">牛肉
        <input type="radio" v-model="radio" value="pork">豬肉
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el:'.app',
        data:{
            radio:'',
        }
    });
</script>

Select 下拉式選單 (單選)

透過 v-modelselect 下拉式選單和資料 select 綁在一起,此時選擇下拉式選單選項,選項中的value 就會放入資料 select 中,而資料 select 只能用單一選項的 value 當值。select 下拉選單的選項可以用 disabled 來產生無法選取的效果,以免使用者誤點。
https://i.imgur.com/t1M7Ksu.png

<body>
    <div class="app">
        喜歡吃什麼肉??
        <select v-model="select">
            <option disabled>-- 請選擇 --</option>
            <option value="chicken">雞肉</option>
            <option value="pork">豬肉</option>
            <option value="beef">牛肉</option>
        </select>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el:'.app',
        data:{
            select:'',
        }
    });
</script>

上一篇
[Day6] 迴圈(v-for)和條件式(v-if)
下一篇
[Day8] 動態屬性指令(v-bind)
系列文
少年學Vue,如隙中窺月30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言